<template>
    <div class="app-container">
        <div style="display:flex">
            <div style="padding-right:50px">{{query.type}}:{{query.key}}</div>
            <div style="padding-right:50px">TTL: {{query.ttl}}</div>
            <div style="display:flex">
                <a-tooltip title="重命名">
                    <a-button type="link" @click="rename"><a-icon type="edit"></a-icon></a-button>
                </a-tooltip>
                <a-tooltip title="过期时间">
                    <a-button type="link" @click="handleTtl"><a-icon type="clock-circle" /></a-button>
                </a-tooltip>
                <a-tooltip title="刷新">
                    <a-button type="link" @click="refresh"><a-icon type="reload"></a-icon></a-button>
                </a-tooltip>
                <a-tooltip title="删除">
                    <a-button type="link" @click="handleDelete"><a-icon type="delete"></a-icon></a-button>  
                </a-tooltip>
                <span v-if="query.type=='HASH'">
                    <a-form :model="queryvalue" layout="inline" >
                        <a-form-item>
                            <a-input-search v-model:value="queryvalue.value" placeholder="请输入key值" @search="handleQuery" ></a-input-search>
                        </a-form-item>
                    </a-form>
                </span>
            </div>
        </div>
        <div style="width:100%;position:relative">
            <!-- 新增按钮 -->
            <span v-if="query.type!='STRING'">
                <div style="position: absolute;right: 20px;top: -35px;">
                    <a-button type="primary" icon="plus" @click="handleAdd">新增value</a-button>
                </div>
            </span>
            <!-- 表格数据 -->
            <span v-if="query.type=='LIST'||query.type=='SET'">
                <a-table  :columns="columns1" :dataSource="detaillist" style="width: 99%;" :pagination="myCustomerTablePageConfig" @change="myCustomerTablePageChange"
                :scroll="{ y: 240 }" :row-selection="rowSelection" :rowKey="record=>record.row">
                    <span slot="action" slot-scope="text, record">
                        <a-button type="link" @click="handleDel(record)">删除</a-button>
                    </span>
                </a-table>
            </span>
            <span v-else-if="query.type=='ZSET'">
                <a-table  :columns="columns2" :dataSource="detaillist" style="width: 99%;" :pagination="myCustomerTablePageConfig" @change="myCustomerTablePageChange"
                :scroll="{ y: 240 }" :row-selection="rowSelection" :rowKey="record=>record.row">
                    <span slot="action" slot-scope="text, record">
                        <a-button type="link" @click="handleDel(record)">删除</a-button>
                    </span>
                </a-table>
            </span>
            <span v-else-if="query.type=='HASH'">
                <a-table  :columns="columns3" :dataSource="detaillist" style="width: 99%;" :pagination="myCustomerTablePageConfig" @change="myCustomerTablePageChange"
                :scroll="{ y: 240 }" :row-selection="rowSelection" :rowKey="record=>record.row">
                    <span slot="action" slot-scope="text, record">
                        <a-button type="link" @click="handleDel(record)">删除</a-button>
                    </span>
                </a-table>
            </span>

            <!-- string 文本域 -->
            <span v-if="query.type=='STRING'">
                <a-form-model :model="formstring" ref="formstring" :rules="stringrules" layout="inline" :label-col="{ span: 2 }" :wrapper-col="{ span:24 }">
                    <a-row>
                        <a-col :span="16">
                            <div style="height:40px;line-height:40px">
                                Value:
                            </div>
                        </a-col>
                        <a-col>
                            <div style="position:absolute;right:0;line-height:40px">
                                view as:
                                <a-form-model-item>
                                    <a-select style="width:210px" v-model:value="formstring.valueviewas" @change="getcheckoption">
                                        <a-select-option :value="1">Plain Text</a-select-option>
                                        <a-select-option :value="2">Json</a-select-option>
                                    </a-select>
                                </a-form-model-item>
                            </div>
                        </a-col>
                    </a-row>
                    <a-form-model-item style="width: 100%" prop="value">
                            <a-textarea style="width: 99%;" :rows="20" v-model:value="formstring.value"></a-textarea>
                    </a-form-model-item>
                </a-form-model>
            </span>

            <!-- list 文本域 -->
            <span v-if="query.type=='LIST'">
                <a-form-model :model="formlist" ref="formlist" :rules="listrules" layout="inline" :label-col="{ span: 2 }" :wrapper-col="{ span:24 }">
                    <a-row>
                        <a-col :span="16">
                            <div style="height:40px;line-height:40px">
                                Value:
                            </div>
                        </a-col>
                        <a-col>
                            <div style="position:absolute;right:0;line-height:40px">
                                view as:
                                <a-form-model-item>
                                    <a-select style="width:210px" v-model:value="formlist.valueviewas" @change="getcheckoption">
                                        <a-select-option :value="1">Plain Text</a-select-option>
                                        <a-select-option :value="2">Json</a-select-option>
                                    </a-select>
                                </a-form-model-item>
                            </div>
                        </a-col>
                    </a-row>
                    <a-form-model-item style="width: 100%" prop="value">
                            <a-textarea style="width: 99%;" :rows="10" v-model:value="formlist.value"></a-textarea>
                    </a-form-model-item>
                </a-form-model>
            </span>

            <!-- set 文本域 -->
            <span v-if="query.type=='SET'">
                <a-form-model :model="formset" ref="formset" :rules="setrules" layout="inline" :label-col="{ span: 2 }" :wrapper-col="{ span:24 }">
                    <a-row>
                        <a-col :span="16">
                            <div style="height:40px;line-height:40px">
                                Value:
                            </div>
                        </a-col>
                        <a-col>
                            <div style="position:absolute;right:0;line-height:40px">
                                view as:
                                <a-form-model-item>
                                    <a-select style="width:210px" v-model:value="formset.valueviewas" @change="getcheckoption">
                                        <a-select-option :value="1">Plain Text</a-select-option>
                                        <a-select-option :value="2">Json</a-select-option>
                                    </a-select>
                                </a-form-model-item>
                            </div>
                        </a-col>
                    </a-row>
                    <a-form-model-item style="width: 100%" prop="value">
                            <a-textarea style="width: 99%;" :rows="10" v-model:value="formset.value"></a-textarea>
                    </a-form-model-item>
                </a-form-model>
            </span>

            <!-- zset 文本域 -->
            <span v-if="query.type=='ZSET'">
                <a-form-model :model="formzset" ref="formzset" :rules="zsetrules" layout="inline" :label-col="{ span: 2 }" :wrapper-col="{ span:24 }">
                    <a-col :span="16">
                        <div style="height:40px;line-height:40px">
                            Score:
                        </div>
                    </a-col>
                    <a-form-model-item style="width: 100%" prop="score">
                        <a-textarea style="width: 99%;" :rows="1" v-model:value="formzset.score"></a-textarea>
                    </a-form-model-item>
                    <a-row>
                        <a-col :span="16">
                            <div style="height:40px;line-height:40px">
                                Value:
                            </div>
                        </a-col>
                        <a-col>
                            <div style="position:absolute;right:0;line-height:40px">
                                view as:
                                <a-form-model-item>
                                    <a-select style="width:210px" v-model:value="formzset.valueviewas" @change="getcheckoption">
                                        <a-select-option :value="1">Plain Text</a-select-option>
                                        <a-select-option :value="2">Json</a-select-option>
                                    </a-select>
                                </a-form-model-item>
                            </div>
                        </a-col>
                    </a-row>
                    <a-form-model-item style="width: 100%" prop="value">
                            <a-textarea style="width: 99%;" :rows="10" v-model:value="formzset.value"></a-textarea>
                    </a-form-model-item>
                </a-form-model>
            </span>

            <!-- hash 文本域 -->
            <span v-if="query.type=='HASH'">
                <a-form-model :model="formhash" ref="formhash" :rules="hashrules" layout="inline" :label-col="{ span: 2 }" :wrapper-col="{ span:24 }">
                    <a-col :span="16">
                        <div style="height:40px;line-height:40px">
                            Key:
                        </div>
                    </a-col>
                    <a-col>
                        <div style="position:absolute;right:0;line-height:40px">
                            view as:
                            <a-form-model-item>
                                <a-select style="width:210px" v-model:value="formhash.keyviewas" @change="getcheckoption">
                                    <a-select-option :value="1">Plain Text</a-select-option>
                                    <a-select-option :value="2">Json</a-select-option>
                                </a-select>
                            </a-form-model-item>
                        </div>
                    </a-col>
                    <a-form-model-item style="width: 100%" prop="newkey">
                        <a-textarea style="width: 99%;" :rows="8" v-model:value="formhash.newkey"></a-textarea>
                    </a-form-model-item>
                    <a-row>
                        <a-col :span="16">
                            <div style="height:40px;line-height:40px">
                                Value:
                            </div>
                        </a-col>
                        <a-col>
                            <div style="position:absolute;right:0;line-height:40px">
                                view as:
                                <a-form-model-item>
                                    <a-select style="width:210px" v-model:value="formhash.valueviewas" @change="getcheckoption">
                                        <a-select-option :value="1">Plain Text</a-select-option>
                                        <a-select-option :value="2">Json</a-select-option>
                                    </a-select>
                                </a-form-model-item>
                            </div>
                        </a-col>
                    </a-row>
                    <a-form-model-item style="width: 100%" prop="value">
                            <a-textarea style="width: 99%;" :rows="10" v-model:value="formhash.value"></a-textarea>
                    </a-form-model-item>
                </a-form-model>
            </span>
            <div style="height: 100px;line-height: 100px;">
                <div style="position:absolute;right:20px;">
                    <a-button type="primary" @click="submitFormupdate">保存</a-button>
                    <a-button style="margin-left:15px" type="dashed" @click="closePage">关闭</a-button>
                </div>
            </div>
        </div>

        <!-- 新增对话框 -->
        <a-modal :title="title" v-model:visible="open" width="800px">
            <!-- list 新增 -->
            <span v-if="query.type=='LIST'">
                <a-form-model ref="formaddlist" :model="formaddlist" :rules="listaddrules" layout="inline" :label-col="{ span: 2 }" :wrapper-col="{ span:24 }">
                    <a-row>
                        <a-col :span="8">
                            <div style="height:40px;line-height:40px">
                                Value:
                            </div>
                        </a-col>
                        <a-col>
                            <div style="position:absolute;right:0;line-height:40px">
                                view as:
                                <a-form-model-item>
                                    <a-select style="width:200px" v-model:value="formaddlist.valueviewas" @change="getcheckoption">
                                        <a-select-option :value="1">Plain Text</a-select-option>
                                        <a-select-option :value="2">Json</a-select-option>
                                    </a-select>
                                </a-form-model-item>
                            </div>
                        </a-col>
                    </a-row> 
                    <a-form-model-item style="width: 100%" prop="value">
                            <a-textarea style="width: 98%;" :rows="15" v-model:value="formaddlist.value"></a-textarea>
                    </a-form-model-item>
                </a-form-model>
            </span>
            <!-- set 新增 -->
            <span v-else-if="query.type=='SET'">
                <a-form-model ref="formaddset" :model="formaddset" :rules="setaddrules" layout="inline" :label-col="{ span: 2 }" :wrapper-col="{ span:24 }">
                    <a-row>
                        <a-col :span="8">
                            <div style="height:40px;line-height:40px">
                                Value:
                            </div>
                        </a-col>
                        <a-col>
                            <div style="position:absolute;right:0;line-height:40px">
                                view as:
                                <a-form-model-item>
                                    <a-select style="width:200px" v-model:value="formaddset.valueviewas" @change="getcheckoption">
                                        <a-select-option :value="1">Plain Text</a-select-option>
                                        <a-select-option :value="2">Json</a-select-option>
                                    </a-select>
                                </a-form-model-item>
                            </div>
                        </a-col>
                    </a-row> 
                    <a-form-model-item style="width: 100%" prop="value">
                            <a-textarea style="width: 98%;" :rows="15" v-model:value="formaddset.value"></a-textarea>
                    </a-form-model-item>
                </a-form-model>
            </span>
            <!-- zset 新增 -->
            <span v-else-if="query.type=='ZSET'">
                <a-form-model ref="formaddzset" :model="formaddzset" :rules="zsetaddrules" layout="inline" :label-col="{ span: 2 }" :wrapper-col="{ span:24 }">
                    <a-row>
                        <a-col :span="8">
                            <div style="height:40px;line-height:40px">
                                Score:
                            </div>
                        </a-col>
                    </a-row> 
                    <a-form-model-item style="width: 100%" prop="score">
                        <a-textarea style="width: 98%;" :rows="2" v-model:value="formaddzset.score"></a-textarea>
                    </a-form-model-item>
                    <a-row>
                        <a-col :span="8">
                            <div style="height:40px;line-height:40px">
                                Value:
                            </div>
                        </a-col>
                        <a-col>
                            <div style="position:absolute;right:0;line-height:40px">
                                view as:
                                <a-form-model-item>
                                    <a-select style="width:200px" v-model:value="formaddzset.valueviewas" @change="getcheckoption">
                                        <a-select-option :value="1">Plain Text</a-select-option>
                                        <a-select-option :value="2">Json</a-select-option>
                                    </a-select>
                                </a-form-model-item>
                            </div>
                        </a-col>
                    </a-row> 
                    <a-form-model-item style="width: 100%" prop="value">
                            <a-textarea style="width: 98%;" :rows="15" v-model:value="formaddzset.value"></a-textarea>
                    </a-form-model-item>
                </a-form-model>
            </span>
            <!-- hash 新增 -->
            <span v-else-if="query.type=='HASH'">
                <a-form-model ref="formaddhash" :model="formaddhash" :rules="hashaddrules" layout="inline" :label-col="{ span: 2 }" :wrapper-col="{ span:24 }">
                    <a-row>
                        <a-col :span="8">
                            <div style="height:40px;line-height:40px">
                                Key:
                            </div>
                        </a-col>
                        <a-col>
                            <div style="position:absolute;right:0;line-height:40px">
                                view as:
                                <a-form-model-item>
                                    <a-select style="width:200px" v-model:value="formaddhash.keyviewas" @change="getcheckoption">
                                        <a-select-option :value="1">Plain Text</a-select-option>
                                        <a-select-option :value="2">Json</a-select-option>
                                    </a-select>
                                </a-form-model-item>
                            </div>
                        </a-col>
                    </a-row> 
                    <a-form-model-item style="width: 100%" prop="newkey">
                        <a-textarea style="width: 98%;" :rows="7" v-model:value="formaddhash.newkey"></a-textarea>
                    </a-form-model-item>
                    <a-row>
                        <a-col :span="8">
                            <div style="height:40px;line-height:40px">
                                Value:
                            </div>
                        </a-col>
                        <a-col>
                            <div style="position:absolute;right:0;line-height:40px">
                                view as:
                                <a-form-model-item>
                                    <a-select style="width:200px" v-model:value="formaddhash.valueviewas" @change="getcheckoption">
                                        <a-select-option :value="1">Plain Text</a-select-option>
                                        <a-select-option :value="2">Json</a-select-option>
                                    </a-select>
                                </a-form-model-item>
                            </div>
                        </a-col>
                    </a-row> 
                    <a-form-model-item style="width: 100%" prop="value">
                            <a-textarea style="width: 98%;" :rows="15" v-model:value="formaddhash.value"></a-textarea>
                    </a-form-model-item>
                </a-form-model>
            </span>
            <div slot="footer" class="dialog-footer">
                <a-button type="primary" @click="submitFormadd">保 存</a-button>
                <a-button @click="cancel">取 消</a-button>
            </div>
        </a-modal>

        <!-- 修改ttl -->
        <a-modal :title="title" v-model:visible="openttl" width="500px">
            <a-form-model ref="form_ttl" :model="formTtl" :rules="rules_ttl">
                <a-form-model-item label="过期时间(秒)" prop="ttl">
                    <a-input v-model:value="formTtl.ttl" placeholder="请输入，-1为无限制"></a-input>
                </a-form-model-item>
            </a-form-model>
            <div slot="footer" class="dialog-footer">
                <a-button type="primary" @click="submitTtl">保存</a-button>
                <a-button @click="cancel">取消</a-button>
            </div>
        </a-modal>

        <!-- 修改key名字 -->
        <a-modal :title="title" v-model:visible="open_rename">
            <a-form-model ref="form_keyname" :model="formRename" :rules="rules_rename">
                <a-form-model-item label="Key" prop="newKey">
                    <a-input v-model:value="formRename.newKey" placeholder="请输入新的Key值"></a-input>
                </a-form-model-item>
            </a-form-model>
            <div slot="footer" class="dialog-footer">
                <a-button type="primary" @click="submitKeyName">保存</a-button>
                <a-button @click="cancel">取消</a-button>
            </div>
        </a-modal>
        
    </div>
</template>

<script>
import { listDetail,addDetail,updateDetail,delDetail } from "@/api/system/redisdetail";
import { updateTtl,delKey,renameKey } from "@/api/system/keys";

export default {
    name:"RedisDetail",
    data(){
        const isValidTtl = (rule, value, callback) => {
            let validttl = /^((-)1|0|[1-9][0-9]*)$/;  // ttl:-1/0/正整数
            if (validttl.test(value)) {
                callback()
            } else {
                callback(new Error("ttl数据不合规"))
            }
        }
        return{
            //新增的表单
            formaddlist:{},
            formaddset:{},
            formaddzset:{},
            formaddhash:{},
            //文本域的的表单
            formstring:{},
            formlist:{},
            formset:{},
            formzset:{},
            formhash:{},
            select_rows:[], // 批量选中的行
      	    selectedRowKeys:[], // 批量选中的key
            // 弹出层标题
            title: "",
            // 是否显示弹出层
            open_rename:false,
            openttl:false,
            open: false,
            //表格数据(最后要改，动态获取)
            detaillist:[],
            //list和set表格内容
            columns1:[
                {
                    title:'row',
                    dataIndex:'row',
                    width:100,
                },
                {
                    title:'value',
                    dataIndex:'value',
                },
                {
                    title: '操作',
                    scopedSlots: { customRender: 'action' },
                    align:'right',
                }
            ],
            //zset表格内容
            columns2:[
                {
                    title:'row',
                    dataIndex:'row',
                    width:100,
                },
                {
                    title:'score',
                    dataIndex:'score',
                    width:200,
                    sorter: (a, b) => a.score - b.score,
                },
                {
                    title:'value',
                    dataIndex:'value',
                },
                {
                    title: '操作',
                    scopedSlots: { customRender: 'action' },
                    align:'right',
                }
            ],
            //hash表格内容
            columns3:[
                {
                    title:'row',
                    dataIndex:'row',
                    width:100,
                },
                {
                    title:'key',
                    dataIndex:'key',
                },
                {
                    title:'value',
                    dataIndex:'value',
                },
                {
                    title: '操作',
                    scopedSlots: { customRender: 'action' },
                    align:'right',
                }
            ],
            //分页参数
            myCustomerTablePageConfig: {
            // 总数据
            total: 0,
            // 每页条数
            pageSize: 5,
            // 当前页
            current: 1,
            // 显示多少页
            showTotal: (total) => `共 ${total} 条`,
            // 是否开启分页数据条数
            showSizeChanger: true,
            // 分页每页显示条数
            pageSizeOptions: ['5', '10', '20', '50', '100'],
        },
            //大key
            query:{
                redisId:null,
                dbId:null,
                key:null,
                type:null,//STRING,list,set,zset,hash
                size:null,
                ttl:null,
            },
            //请求
            queryvalue:{
                redisId:null,
                dbId:null,
                key:null,
                value:null,
            },
            //文本域表单数据
            form:{},
            //判断新增还是修改
            isadd:false,
            //新增表单数据
            formadd:{},
            //修改过期时间
            formTtl: {
                "redisId": null,
                "dbId": null,
                "key": null,
                "ttl": null
            },
            //key重命名
            formRename: {
                "redisId": null,
                "dbId": null,
                "oldKey": null,
                "newKey": null
            },
            // ttl修改表单校验
            rules_ttl: {
                ttl: [
                    { required: true, message: "过期时间设置不能为空", trigger: "blur" },
                    { validator: isValidTtl, message: "请输入正确的格式，必须为0，正整数或-1", trigger: "blur" }
                ]
            },
            // rename 表单校验
            rules_rename: {
                newKey: [
                    { required: true, message: "新名称设置不能为空", trigger: "blur" },
                ]
            },
            //表单校验
            stringrules:{
                value:[{ required: true, message: "value不能为空", trigger: "blur" },]
            },
            listrules:{
                value:[{ required: true, message: "value不能为空", trigger: "blur" },]
            },
            listaddrules:{
                value:[{ required: true, message: "value不能为空", trigger: "blur" },]
            },
            setrules:{
                value:[{ required: true, message: "value不能为空", trigger: "blur" },]
            },
            setaddrules:{
                value:[{ required: true, message: "value不能为空", trigger: "blur" },]
            },
            zsetrules:{
                score:[{ required: true, message: "score不能为空", trigger: "blur" },
                        { pattern:/^(-?\d+)(\.\d+)?$/ ,message:'请输入数字' }],
                value:[{ required: true, message: "value不能为空", trigger: "blur" },]
            },
            zsetaddrules:{
                score:[{ required: true, message: "score不能为空", trigger: "blur" },
                        { pattern:/^(-?\d+)(\.\d+)?$/ ,message:'请输入数字' }],
                value:[{ required: true, message: "value不能为空", trigger: "blur" },]
            },
            hashrules:{
                newkey:[{ required: true, message: "key不能为空", trigger: "blur" },],
                value:[{ required: true, message: "value不能为空", trigger: "blur" },]
            },
            hashaddrules:{
                newkey:[{ required: true, message: "key不能为空", trigger: "blur" },],
                value:[{ required: true, message: "value不能为空", trigger: "blur" },]
            },
        }
    },
    computed: {
    //选中一行数据在输入框显示对应值
    rowSelection() {
        const { selectedRowKeys } = this;
      return {
        type:'radio',//表格单选一行
        selectedRowKeys,
        onChange: (selectedRowKeys, selectedRows) => {
            this.selectedRowKeys = selectedRowKeys;
         	this.select_rows = selectedRows;
        //先重置表单
        this.reset();
        if(this.query.type=='LIST'){
            // index存下标(字符串类型),value存新value
            this.formlist.index=selectedRows[0].row-1;
            this.formlist.index+='';
            this.formlist.value=selectedRows[0].value;
        }
        else if(this.query.type=='SET'){
            //选中传旧值和新值(此时和旧值一致)
            this.formset.oldvalue=selectedRows[0].value;
            this.formset.value=selectedRows[0].value;
        }
        else if(this.query.type=='HASH'){//hash显示key
            this.formhash.oldkey=selectedRows[0].key;
            this.formhash.newkey=selectedRows[0].key;
            this.formhash.value=selectedRows[0].value;
        }
        else if(this.query.type=='ZSET'){//zset显示score
            this.formzset.oldvalue=selectedRows[0].value;
            this.formzset.value=selectedRows[0].value;
            this.formzset.score=selectedRows[0].score;
        }
        },
      };
    },
  },
  created(){
    this.queryvalue.redisId=this.$route.params.redisId;
    this.queryvalue.dbId=this.$route.params.dbId;
    this.queryvalue.key=this.$route.params.key;
    this.getList();
  },
    methods: {
        clearData () {
			this.selectedRowKeys = [] // 再调用这个方法就有效果了
		},
        //查看方式下拉框选项变化
        getcheckoption(val){
            if(this.isadd==false){
                if(this.query.type=='STRING'){
                    if(this.formstring.valueviewas==1){
                        this.formstring.value=JSON.stringify(JSON.parse(this.formstring.value));
                    }
                    else if(this.formstring.valueviewas==2){
                        this.formstring.value=JSON.stringify(JSON.parse(this.formstring.value), null, '\t')
                    }
                }
                else if(this.query.type=='LIST'){
                    if(this.formlist.valueviewas==1){
                        this.formlist.value=JSON.stringify(JSON.parse(this.formlist.value));
                    }
                    else if(this.formlist.valueviewas==2){
                        this.formlist.value=JSON.stringify(JSON.parse(this.formlist.value), null, '\t')
                    }
                }
                else if(this.query.type=='SET'){
                    if(this.formset.valueviewas==1){
                        this.formset.value=JSON.stringify(JSON.parse(this.formset.value));
                    }
                    else if(this.formset.valueviewas==2){
                        this.formset.value=JSON.stringify(JSON.parse(this.formset.value), null, '\t')
                    }
                }
                else if(this.query.type=='ZSET'){
                    if(this.formzset.valueviewas==1){
                        this.formzset.value=JSON.stringify(JSON.parse(this.formzset.value));
                    }
                    else if(this.formzset.valueviewas==2){
                        this.formzset.value=JSON.stringify(JSON.parse(this.formzset.value), null, '\t')
                    }
                }
                else if(this.query.type=='HASH'){
                    if(this.formhash.valueviewas==1){
                        this.formhash.value=JSON.stringify(JSON.parse(this.formhash.value));
                    }
                    else if(this.formhash.valueviewas==2){
                        this.formhash.value=JSON.stringify(JSON.parse(this.formhash.value), null, '\t')
                    }
                    if(this.formhash.keyviewas==1){
                        this.formhash.newkey=JSON.stringify(JSON.parse(this.formhash.newkey));
                    }
                    else if(this.formhash.keyviewas==2){
                        this.formhash.newkey=JSON.stringify(JSON.parse(this.formhash.newkey), null, '\t')
                    }
                }        
            }
            else{
                if(this.query.type=='LIST'){
                    if(this.formaddlist.valueviewas==1){
                        this.formaddlist.value=JSON.stringify(JSON.parse(this.formaddlist.value));
                    }
                    else if(this.formaddlist.valueviewas==2){
                        this.formaddlist.value=JSON.stringify(JSON.parse(this.formaddlist.value), null, '\t')
                    }
                }
                else if(this.query.type=='SET'){
                    if(this.formaddset.valueviewas==1){
                        this.formaddset.value=JSON.stringify(JSON.parse(this.formaddset.value));
                    }
                    else if(this.formaddset.valueviewas==2){
                        this.formaddset.value=JSON.stringify(JSON.parse(this.formaddset.value), null, '\t')
                    }
                }
                else if(this.query.type=='ZSET'){
                    if(this.formaddzset.valueviewas==1){
                        this.formaddzset.value=JSON.stringify(JSON.parse(this.formaddzset.value));
                    }
                    else if(this.formaddzset.valueviewas==2){
                        this.formaddzset.value=JSON.stringify(JSON.parse(this.formaddzset.value), null, '\t')
                    }
                }
                else if(this.query.type=='HASH'){
                    if(this.formaddhash.valueviewas==1){
                        this.formaddhash.value=JSON.stringify(JSON.parse(this.formaddhash.value));
                    }
                    else if(this.formaddhash.valueviewas==2){
                        this.formaddhash.value=JSON.stringify(JSON.parse(this.formaddhash.value), null, '\t')
                    }
                    if(this.formaddhash.keyviewas==1){
                        this.formaddhash.newkey=JSON.stringify(JSON.parse(this.formaddhash.newkey));
                    }
                    else if(this.formaddhash.keyviewas==2){
                        this.formaddhash.newkey=JSON.stringify(JSON.parse(this.formaddhash.newkey), null, '\t')
                    }
                }
            }
        },
        /** 查询列表 */
        getList() {
            listDetail(this.queryvalue).then(response => {
                this.query=response.data
                //如果是STRING,直接把value传到文本域里
                if(this.query.type=='STRING'){
                    this.reset()
                    this.formstring.value=response.data.value
                }
                //LIST和SET遍历返回的数据，存入表格 
                else if(this.query.type=='LIST'||this.query.type=='SET'){
                    for (let i = 0; i < response.data.value.length; i++) {
                    this.detaillist.push({
                    row: i+1,
                    value: `${response.data.value[i]}`,
                });
                }
                }
                else if(this.query.type=='ZSET'){
                    for (let i = 0; i < response.data.value.length; i++) {
                        this.detaillist.push({
                        row: i+1,
                        value: `${response.data.value[i].value}`,
                        score:`${response.data.value[i].score}`,
                    });
                }
                }
                else if(this.query.type=='HASH'){
                    if(response.data.value!=null){
                        let hashkeys=Object.keys(response.data.value);
                    let hashvalues=Object.values(response.data.value);
                    for (let i = 0; i < hashkeys.length; i++) {
                        this.detaillist.push({
                        row: i+1,
                        key:`${hashkeys[i]}`,
                        value: `${hashvalues[i]}`,
                    });
                    }
                }
                }
            });
            },
        //搜索按钮操作 
        handleQuery() {
            this.detaillist=[];
            this.getList();
        },
        //分页改变
        myCustomerTablePageChange(pagination) {
            let { current, pageSize } = pagination
            this.myCustomerTablePageConfig = Object.assign(this.myCustomerTablePageConfig, { current, pageSize })
        },
        //重置表单
        reset() {
            if(this.query.type=='STRING'){
                this.formstring={
                    redisId:this.queryvalue.redisId,
                    dbId:this.queryvalue.dbId,
                    key:this.queryvalue.key,
                    value:null,
                    valueviewas:1,
                }
            }
            else if(this.query.type=='LIST'){
                this.formlist={
                    redisId:this.queryvalue.redisId,
                    dbId:this.queryvalue.dbId,
                    key:this.queryvalue.key,
                    index:null,
                    value:null,
                    valueviewas:1,
                }
            }
            else if(this.query.type=='SET'){
                this.formset={
                    redisId:this.queryvalue.redisId,
                    dbId:this.queryvalue.dbId,
                    key:this.queryvalue.key,
                    oldvalue:null,
                    value:null,
                    valueviewas:1,
                }
            }
            else if(this.query.type=='ZSET'){
                this.formzset={
                    redisId:this.queryvalue.redisId,
                    dbId:this.queryvalue.dbId,
                    key:this.queryvalue.key,
                    oldvalue:null,
                    value:null,
                    valueviewas:1,
                    score:0,
                }
            }
            else if(this.query.type=='HASH'){
                this.formhash={
                    redisId:this.queryvalue.redisId,
                    dbId:this.queryvalue.dbId,
                    key:this.queryvalue.key,
                    oldkey:null,
                    keyviewas:1,
                    newkey:null,
                    value:null,
                    valueviewas:1,
                }
            }
        this.form = {
            redisId:this.queryvalue.redisId,
            dbId:this.queryvalue.dbId,
            key:this.queryvalue.key,
            value:null,
        };
      },
      //重置add表单
      resetadd() {
            if(this.query.type=='LIST'){
                this.formaddlist={
                    redisId:this.queryvalue.redisId,
                    dbId:this.queryvalue.dbId,
                    key:this.queryvalue.key,
                    value:null,
                    valueviewas:1,
                }
            }
            else if(this.query.type=='SET'){
                this.formaddset={
                    redisId:this.queryvalue.redisId,
                    dbId:this.queryvalue.dbId,
                    key:this.queryvalue.key,
                    value:null,
                    valueviewas:1,
                }
            }
            else if(this.query.type=='ZSET'){
                this.formaddzset={
                    redisId:this.queryvalue.redisId,
                    dbId:this.queryvalue.dbId,
                    key:this.queryvalue.key,
                    value:null,
                    valueviewas:1,
                    score:0,
                }
            }
            else if(this.query.type=='HASH'){
                this.formaddhash={
                    redisId:this.queryvalue.redisId,
                    dbId:this.queryvalue.dbId,
                    key:this.queryvalue.key,
                    newkey:null,
                    keyviewas:1,
                    value:null,
                    valueviewas:1,
                }
            }
        this.formadd = {
            redisId:this.queryvalue.redisId,
            dbId:this.queryvalue.dbId,
            key:this.queryvalue.key,
            value:null,
        };
      },
      //新增按钮操作 
        handleAdd() {
            this.resetadd();
            this.open=true;
            this.isadd=true;
            this.title = "新增value";
        },
      // 取消按钮
        cancel() {
            if(this.openttl==true){
                this.openttl=false;
                this.formTtl = {
                        redisId: null,
                        dbId: null,
                        key: null,
                        ttl: null,
                    }
            }
            else if(this.open_rename==true){
                this.open_rename=false;
                this.formRename = {
                redisId: null,
                dbId: null,
                oldKey: null,
                newKey: null,
            }
            }
            else {
                this.open=false;
                this.isadd=false;
                this.reset();
            }
            this.cleartextarea();
        },
        //新增保存按钮 
        submitFormadd(){
            //JSON修改后先转换成纯文本再存到redis
                if(this.query.type=='LIST'){
                    if(this.formaddlist.valueviewas!=1){
                        this.formaddlist.valueviewas=1
                        this.formaddlist.value=JSON.stringify(JSON.parse(this.formaddlist.value));
                    }
                    this.formadd.value=this.formaddlist.value
                }
                else if(this.query.type=='SET'){
                    if(this.formaddset.valueviewas!=1){
                        this.formaddset.valueviewas=1
                        this.formaddset.value=JSON.stringify(JSON.parse(this.formaddset.value));
                    }
                    this.formadd.value=this.formaddset.value
                }
                else if(this.query.type=='ZSET'){
                    if(this.formaddzset.valueviewas!=1){
                        this.formaddzset.valueviewas=1
                        this.formaddzset.value=JSON.stringify(JSON.parse(this.formaddzset.value));
                    }
                    this.formadd.value=[]
                    this.formadd.value[0]=this.formaddzset.value
                    this.formadd.value[1]=this.formaddzset.score+''
                }
                else if(this.query.type=='HASH'){
                    if(this.formaddhash.valueviewas!=1){
                        this.formaddhash.valueviewas=1
                        this.formaddhash.value=JSON.stringify(JSON.parse(this.formaddhash.value));
                    }
                    if(this.formaddhash.keyviewas!=1){
                        this.formaddhash.keyviewas=1
                        this.formaddhash.newkey=JSON.stringify(JSON.parse(this.formaddhash.newkey));
                    }
                    this.formadd.value=[]
                    this.formadd.value[0]=this.formaddhash.newkey;
                    this.formadd.value[1]=this.formaddhash.value;
                }
                addDetail(this.formadd).then(response => {
                    this.$modal.msgSuccess("新增成功");
                    this.open=false;
                    this.isadd=false;
                    this.cleartextarea();
                    //表格数据是push进去，所以修改后先清空一下
                    this.detaillist=[]
                    this.getList();
                });
        },
        //修改保存按钮
        submitFormupdate() {
            if(this.query.type=='STRING'){
                if(this.formstring.valueviewas!=1){
                    this.formstring.valueviewas=1
                    this.formstring.value=JSON.stringify(JSON.parse(this.formstring.value));
                }
                this.form.value=this.formstring.value
            }
            else if(this.query.type=='LIST'){
                if(this.formlist.valueviewas!=1){
                    this.formlist.valueviewas=1
                    this.formlist.value=JSON.stringify(JSON.parse(this.formlist.value));
                }
                this.form.value=[]
                this.form.value[0]=this.formlist.index
                this.form.value[1]=this.formlist.value
            }
            else if(this.query.type=='SET'){
                if(this.formset.valueviewas!=1){
                    this.formset.valueviewas=1
                    this.formset.value=JSON.stringify(JSON.parse(this.formset.value));
                }
                this.form.value=[]
                this.form.value[0]=this.formset.oldvalue
                this.form.value[1]=this.formset.value
            }
            else if(this.query.type=='ZSET'){
                if(this.formzset.valueviewas!=1){
                    this.formzset.valueviewas=1
                    this.formzset.value=JSON.stringify(JSON.parse(this.formzset.value));
                }
                this.form.value=[]
                this.form.value[0]=this.formzset.oldvalue
                this.form.value[1]=this.formzset.value
                this.form.value[2]=this.formzset.score+''
            }
            else if(this.query.type=='HASH'){
                if(this.formhash.valueviewas!=1){
                    this.formhash.valueviewas=1
                    this.formhash.value=JSON.stringify(JSON.parse(this.formhash.value));
                }
                if(this.formhash.keyviewas!=1){
                    this.formhash.keyviewas=1
                    this.formhash.newkey=JSON.stringify(JSON.parse(this.formhash.newkey));
                }
                this.form.value=[]
                this.form.value[0]=this.formhash.oldkey
                this.form.value[1]=this.formhash.newkey
                this.form.value[2]=this.formhash.value
            }
                updateDetail(this.form).then(response => {
                    this.$modal.msgSuccess("修改成功");
                    this.cleartextarea();
                    //表格数据是push进去，所以修改后先清空一下
                    this.detaillist=[]
                    this.getList();
                });
        },
        //删除
        handleDel(record) {
            this.reset();
            //LIST索引确定删除哪条
            if(this.query.type=='LIST'){
                this.form.value=record.row-1+'';
            }
            //SET ZSET value确定删除哪条
            else if(this.query.type=='SET'||this.query.type=='ZSET'){
                this.form.value=record.value;
            }
            //HASH key确定删除哪条
            else if(this.query.type=='HASH'){
                this.form.value=record.key;
            }
            this.$modal.confirm('确定删除该行数据吗？').then(()=> {
                return delDetail(this.form);
              }).then(response=> {
                this.$modal.msgSuccess("删除成功");
                this.cleartextarea();
                //表格数据是push进去，所以修改后先清空一下
                    this.detaillist=[];
                    this.getList();
              }).catch(() => {
                // this.cleartextarea();
              });
      },
      //关闭页面
      closePage(){
        this.$store.dispatch('tagsView/delView', this.$route)
        this.$router.go(-1)//跳回上页
     },
     // 修改ttl按钮
     handleTtl(row) {
        this.formTtl = {
                redisId: null,
                dbId: null,
                key: null,
                ttl: null,
            }
            this.formTtl.key = this.queryvalue.key
            this.formTtl.ttl = this.query.ttl
            this.openttl = true
            this.title = "过期时间"
        },
        // 提交ttl
        submitTtl() {
            this.formTtl.redisId = this.queryvalue.redisId;
            this.formTtl.dbId = this.queryvalue.dbId;
            this.$refs["form_ttl"].validate(valid => {
                if (valid) {
                    updateTtl(this.formTtl).then(response => {
                        this.$modal.msgSuccess("过期时间修改成功")
                        this.openttl = false;
                        this.cleartextarea();
                        this.detaillist=[];
                        this.getList();
                    })
                }
            })
        },
        //刷新
        refresh(){
            //清除哈希的搜索框
            this.queryvalue.value=''
            this.detaillist=[];
            this.getList();
            this.cleartextarea();
        },
        //删除整个key
        handleDelete(){
            this.form.value=[]
            this.form.value[0]=this.form.key;
            this.$modal.confirm('删除后无法恢复，是否确认删除"' + this.form.key + '"？').then(()=>{
                    return delKey(this.form);
                }).then(() => {
                    this.$modal.msgSuccess("删除成功");
                    this.closePage()
                }).catch(() => { 
                    this.cleartextarea()
                });
        },
        //打开重命名框
        rename(){
            this.formRename = {
                redisId: null,
                dbId: null,
                oldKey: null,
                newKey: null
            }
            this.formRename.oldKey = this.queryvalue.key
            this.formRename.newKey = this.queryvalue.key // 输入框内先显示原Key值
            this.open_rename = true
            this.title = "重命名"
        },
        // 提交RenameKey 
        submitKeyName() {
            this.$refs["form_keyname"].validate(valid => {
                if (valid) {
                    this.formRename.redisId = this.queryvalue.redisId+''
                    this.formRename.dbId = this.queryvalue.dbId+''
                    renameKey(this.formRename).then(response => {
                        this.$modal.msgSuccess("重命名成功")
                        this.queryvalue.key=this.formRename.newKey
                        this.open_rename = false;
                        this.cleartextarea();
                        this.detaillist=[];
                        this.getList();
                    })
                }
            })
        },
        cleartextarea(){
            //清除表格的选中和文本域的内容
            this.clearData();
            if(this.query.type=='LIST'){
                this.formlist.valueviewas=1
                this.formlist.value=''
            }
            else if(this.query.type=='SET'){
                this.formset.valueviewas=1
                this.formset.value=''
            }
            else if(this.query.type=='ZSET'){
                this.formzset.score=''
                this.formzset.valueviewas=1
                this.formzset.value=''
            }
            else if(this.query.type=='HASH'){
                this.formhash.keyviewas=1
                this.formhash.newkey=''
                this.formhash.valueviewas=1
                this.formhash.value=''
            }
        }
    },
}
</script>